<template>
  <div class="box">{{ a }} : {{ b }}</div>
  <Row>
    <Col span="8">
      <Button type="default" @click="add">操作</Button>
    </Col>
    <Col span="8">
      <Button type="default" @click="add2">操作</Button>
    </Col>
    <Col span="8">
      <Button type="default" @click="add3">操作</Button>
    </Col>
  </Row>
  <Row type="flex">
    <Col v-for="(item, index) in t?.list" :key="index" flex="1">
      <div class="box1">
        {{ item.label }}
      </div>
    </Col>
  </Row>
  <Row class="slot">
    <testSlot>
      <!-- <template v-slot:a="innerObj">
				<div>
					{{ innerObj }}
					{{ obj.a }}
				</div>
			</template> -->
      <template #a="innerObj">
        <div>
          {{ innerObj }}
          {{ obj.a }}
        </div>
      </template>
    </testSlot>
  </Row>
</template>
<script>
import testSlot from './251014.slot.vue'
import { MyBox } from './251014.test'
export default {
  name: 'myBox',
  components: {
    testSlot
  },
  data() {
    return {
      a: 1,
      b: 2,
      t: null,
      obj: {
        a: 1,
        b: 2
      }
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      this.a++
    },
    add2() {
      console.log(`helloworld2`)
    },
    add3() {
      console.log(`helloworld`)
    }
  },
  mounted() {
    let t = new MyBox()
    this.t = t
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
.box1 {
  height: 100px;
  border: 1px solid #000;
}
</style>
